<style lang='scss'>
@import "@css/style.scss";
.parallax{
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: hidden;
    overflow-y: auto;

    &-slow{
        width: 100%;
        position: relative;
    }
    &-content{
        width: 100%;
        position: relative;
    }
}
</style>
<template>
  <div class="parallax" @scroll="onScrollChange">
    <!-- 缓慢区域 -->
    <div class="parallax-slow" :style="{top:slowTop}">
        <slot name="parallax-slow"></slot>
    </div>
    <!-- 正常区域 -->
    <div class="parallax-content z-index-2">
        <slot></slot>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        //速度差
        SPEED_DIFF:2, 
      //页面滑动距离
      parallaxScroll:0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      
    },
    //监听滑动
    onScrollChange($event){
        this.parallaxScroll=$event.target.scrollTop;
        //触发主键上事件 为了Nav的滑动颜色渐变
        this.$emit('onScrollChange',this.parallaxScroll)
    }
  },
  computed: {
      //返回缓慢距离顶部值
    slowTop(){
        return (this.parallaxScroll - this.parallaxScroll / this.SPEED_DIFF)+'px';
    }
  }
}
</script>